import React from 'react'
import {Input ,Radio ,Select ,Button ,message,Checkbox ,Divider } from 'antd';
import './index.less';
import axios from 'axios';
import {PATH,IP} from '../../../../../utils/urls';
import BreadcrumbCustom from "../../../../../components/BreadcrumbCustom";
const { Option } = Select;
//大于和小于的id
const conditionType=[30,29];
export default class ServiceClientWarnSetup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            resouceType: 0,
            appId:"",
            name:"",
            sendData:[
                {resourceId:0,isSoftware:0,isFluctuation:0,monitorTypeDictId: 44,conditionTypeDictId:30,conditionLowerLimit:0,warnSwitchStatus:0,isChecked:0}
                ,{resourceId:0,isSoftware:0,isFluctuation:0,monitorTypeDictId: 46,conditionTypeDictId:30,conditionLowerLimit:0,warnSwitchStatus:0,isChecked:0}
                ,{resourceId:0,isSoftware:0,isFluctuation:0,monitorTypeDictId: 45,conditionTypeDictId:30,conditionLowerLimit:0,warnSwitchStatus:0,isChecked:0}
                ,{resourceId:0,isSoftware:0,isFluctuation:1,monitorTypeDictId: 44,conditionTypeDictId:30,conditionLowerLimit:0,warnSwitchStatus:0,isChecked:0}
                ,{resourceId:0,isSoftware:0,isFluctuation:1,monitorTypeDictId: 46,conditionTypeDictId:30,conditionLowerLimit:0,warnSwitchStatus:0,isChecked:0}
                ,{resourceId:0,isSoftware:0,isFluctuation:1,monitorTypeDictId: 45,conditionTypeDictId:30,conditionLowerLimit:0,warnSwitchStatus:0,isChecked:0}
            ]
        };
    }

    componentDidMount() {
        console.log(this.props);
        if(this.props.location.state == null){
            return;
        }
        this.setState({
            appId:this.props.location.state.appId,
            name:this.props.location.state.name,
        })

        for(let i = 0;i<this.state.sendData.length;i++){
            this.state.sendData[i].resourceId = this.props.location.state.appId;
            this.state.sendData[i].isSoftware = this.props.location.state.resouceType;
        }
    }


    /**
     * 输入框值变化
     * @returns {*}
     */
    inputChange = (event)=>{
        console.log(123);
        if(event && event.target && event.target.value){
            let value = event.target.value;
            let index = event.target.id.substring(event.target.id.length - 1,event.target.id.length) - 2;
            for(let i = 0;i<this.state.sendData.length;i++){
                if(index == i){
                    this.state.sendData[i].conditionLowerLimit = value;
                }
            }
        }

        console.log(this.state);
    }
    /**
     * 返回
     * @returns {*}
     */
    backFun=()=>{
        let path={
            pathname:"warnsetuphardware"
        }
        this.props.history.push(path);
    }

    /**
     * 保存
     * @returns {*}
     */
    onSubmit=()=>{
        console.log(this.state);
        axios.post(PATH.warnConfEdit,this.state.sendData)
            .then(response=>{
                console.log(response);
                if(response.data.code == 0){
                    message.success(response.data.msg);
                }else{
                    message.error(response.data.msg);
                }
            })
    }

    /**
     * 设置是否启动状态报警
     * @param e
     */
    onSetStateSelectFunAll=e=>{
        console.log(e.target.checked);
        for(let i = 0;i<this.state.sendData.length;i++){
            this.state.sendData[i].warnSwitchStatus = e.target.checked?1:0;
        }
    }

    /**
     * 设置是cup,内存,io开启
     * @param e
     */
    onSetStateSelectFun(e,props){
        console.log(e);
        console.log(props);
        let index = e.substring(e.length - 1,e.length) - 1;
        for(let i = 0;i<this.state.sendData.length;i++){
            if(index == i){
                this.state.sendData[i].isChecked = props.target.checked?1:0;
            }
        }
        console.log(this.state);
    }

    onSelectChange(e,props){
        console.log(e);
        console.log(props);
        let index = e.substring(e.length - 1,e.length);
        for(let i = 0;i<this.state.sendData.length;i++){
            if(i == index){
                this.state.sendData[i].conditionTypeDictId = conditionType[props];
                break;
            }
        }
        console.log(this.state.sendData);
    }

    render() {
        return (
            <div>
                <BreadcrumbCustom first="告警" second="告警设置" />
                <div className="changeAllContent">
                    <Button onClick={this.backFun} className="backBtn">返回</Button>
                    <div className="warnSetupCell">
                        <div className="changeTitle">名称:</div>
                        <Input value={this.state.name} id="editEquipMentInput0" className="changeCell"/>
                    </div>
                    <div className="warnSetupCell">
                        <div className="changeTitle">资源标识(Appid):</div>
                        <Input value={this.state.appId} id="editEquipMentInput1" className="changeCell" />
                    </div>
                    <div className="warnSetupCell">
                        <Checkbox id="serviceclientCheckbox0" className="warnSetupCheckbox" onChange={this.onSetStateSelectFunAll}>启用状态告警</Checkbox>
                    </div>
                    <div className="warnSetupCell">
                        <Checkbox id="serviceclientCheckbox1" className="warnSetupCheckbox" onChange={this.onSetStateSelectFun.bind(this,"serviceclientCheckbox1")}>端口宽带</Checkbox>
                        <Select className="changeTitle serviceclientSelect" id="serviceclientSelect0" onChange={this.onSelectChange.bind(this,"serviceclientSelect0")} style={{width: 80}} defaultValue="小于">
                            <Option value="0">小于</Option>
                            <Option value="1">大于</Option>
                        </Select>
                        <Input onChange={event=>this.inputChange(event)} defaultValue="0"  id="editEquipMentInput2" className="changeCell secretkey"/>
                        <div className="changeTitle secretkeyunit">%</div>
                    </div>
                    <div className="warnSetupCell">
                        <Checkbox id="serviceclientCheckbox2" className="warnSetupCheckbox" onChange={this.onSetStateSelectFun.bind(this,"serviceclientCheckbox2")}>网络流量</Checkbox>
                        <Select className="changeTitle serviceclientSelect" id="serviceclientSelect1" onChange={this.onSelectChange.bind(this,"serviceclientSelect1")} style={{width: 80}} defaultValue="小于">
                            <Option value="0">小于</Option>
                            <Option value="1">大于</Option>
                        </Select>
                        <Input onChange={event=>this.inputChange(event)} defaultValue="0"  id="editEquipMentInput3" className="changeCell secretkey" />
                        <div className="changeTitle secretkeyunit">%</div>
                    </div>
                    <h3 className="jiankongline">5分钟波动率告警</h3>
                    <Divider type="horizontal "></Divider>
                    <div className="warnSetupCell">
                        <Checkbox id="serviceclientCheckbox3" className="warnSetupCheckbox" onChange={this.onSetStateSelectFun.bind(this,"serviceclientCheckbox3")}>端口宽带</Checkbox>
                        <Select className="changeTitle serviceclientSelect" id="serviceclientSelect2" onChange={this.onSelectChange.bind(this,"serviceclientSelect2")} style={{width: 80}} defaultValue="小于">
                            <Option value="0">小于</Option>
                            <Option value="1">大于</Option>
                        </Select>
                        <Input onChange={event=>this.inputChange(event)} defaultValue="0"  id="editEquipMentInput4" className="changeCell secretkey"/>
                        <div className="changeTitle secretkeyunit">%</div>
                    </div>
                    <div className="warnSetupCell">
                        <Checkbox id="serviceclientCheckbox4" className="warnSetupCheckbox" onChange={this.onSetStateSelectFun.bind(this,"serviceclientCheckbox4")}>网络流量</Checkbox>
                        <Select className="changeTitle serviceclientSelect" id="serviceclientSelect3" onChange={this.onSelectChange.bind(this,"serviceclientSelect3")} style={{width: 80}} defaultValue="小于">
                            <Option value="0">小于</Option>
                            <Option value="1">大于</Option>
                        </Select>
                        <Input onChange={event=>this.inputChange(event)} defaultValue="0"  id="editEquipMentInput5" className="changeCell secretkey"/>
                        <div className="changeTitle secretkeyunit">%</div>
                    </div>
                    <div className="resourceContentCell changeHardBtnDiv">
                        <Button className="changeHardBtn" onClick={this.onSubmit}>保存</Button>
                    </div>
                </div>
            </div>
        )
    }
}